.fui-btn
  line-height: 1
  border: 1px solid transparent
  border-radius: $radius-2px
  color: $text-reverse
  cursor: pointer
  text-decoration: none
  font-size: $font-md
  position: relative
  overflow: hidden

  &[disabled]
    background-color: $bg-disabled
    border-color: $bg-disabled
    color: $text-disabled
    cursor: not-allowed
    box-shadow: none

    svg
      fill: $text-disabled !important

  &[disabled].fui-btn-outline
    background-color: transparent
    border-color: $bg-disabled
    color: $text-disabled

    svg
      fill: $text-disabled !important

  &:focus
    outline: none

@mixin fui-btn-mixin($type, $bg-color, $text-color: $bg-color)
  .fui-btn-#{$type}
    background-color: $bg-color
    border-color: $bg-color

    &:not([disabled]):hover
      filter: brightness(105%)

    &.fui-btn-outline
      background-color: transparent
      border-color: $bg-color
      color: $text-color

      svg.fui-btn-icon-left
        fill: $text-color

      &:not([disabled]):hover
        background-color: $bg-hover-mute

      .fui-btn-ripple-circle-color
        background: $bg-color
        filter: opacity(0.5)

@include fui-btn-mixin(primary, $brand-primary)
@include fui-btn-mixin(default, $brand-default, $text-default)
@include fui-btn-mixin(danger, $brand-danger)
@include fui-btn-mixin(warning, $brand-warning)
@include fui-btn-mixin(success, $brand-success)

.fui-btn-sm
  padding: 4px 8px
  font-size: 12px

.fui-btn-md
  min-width: 86px
  padding: 8px 10px
  text-align: center

.fui-btn-lg
  padding: 8px 128px

.fui-btn-group
  display: flex

  .fui-btn
    border-radius: 0

    &:not(:last-child)
      border-right: none

    &:first-child
      border-radius: $radius-2px 0 0 $radius-2px

    &:last-child
      border-radius: 0 $radius-2px $radius-2px 0

.fui-btn
  display: inline-flex
  align-items: center
  justify-content: center

  svg.fui-btn-icon-left
    display: inline-block
    width: 14px
    height: 14px
    fill: $icon-reverse
    margin-right: 8px

.fui-btn-ripple-circle
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    opacity: 0
    width: 0
    height: 0
    border-radius: 50%
    background: rgba(255, 255, 255, .25)
    pointer-events: none
    animation: btn-ripple .5s ease-in

@keyframes btn-ripple
  0%
    opacity: 0

  25%
    opacity: 1

  100%
    width: 200%
    padding-bottom: 200%
    opacity: 0
